<template>
    <view class="content">
		<view class="login-avatar">
			<image class="avatar" mode="widthFix" src="/static/img/login/avatar.png"></image>
		</view>
        <view class="input-group">
            <view class="input-row">
                <view class="title">
					<image class="icon" mode="widthFix" src="/static/img/login/person.png"></image>
                </view>
                <m-input class="m-input input-frame" type="text" clearable focus v-model="username" placeholder="请输入账号"></m-input>
            </view>
            <view class="input-row">
                <view class="title">
					<image class="icon" mode="widthFix" src="/static/img/login/password.png"></image>
                </view>
                <m-input type="password" class="input-frame" displayable v-model="password" placeholder="请输入密码"></m-input>
            </view>
            <!-- <view class="input-row">
                <view class="title">
                    <m-icon type="speech" size="26"></m-icon>
                </view>
                <m-input type="text" v-model="identifycode" placeholder="请输入验证码"></m-input>
            </view> -->
        </view>
		<view class="action-row">
            <!-- <checkbox-group @change="checkboxChange">
                <label>
                    <checkbox  v-model="isRemeberLabel" :checked="isRemeber" style="transform:scale(0.7)"/>{{isRemeberLabel}}
                </label>
            </checkbox-group> -->
		    <navigator url="../forgotpassword/forgotpassword">忘记密码</navigator>
            <navigator v-if="useGesture" open-type="redirect" url="/pages/system/gestureLock/gestureLock?purpose=unlock">切换手势登录</navigator>
		</view>
        <view class="btn-row">
            <button type="primary" class="primary loginBtn" @tap="bindLogin">登录</button>
        </view>
        
    </view>
</template>

<script>
    import application from '@/settings/Application'
    import {judgeExpireTimestamp} from '@/utils/index';
    import {refreshForlogin} from '@/utils/page'
    import {
        mapActions,
        mapState,
        mapMutations
    } from 'vuex'
    import mInput from '@/components/common/m-input/m-input'
    import mIcon from '@/components/common/m-icon/m-icon'
    import mixins from '@/mixins/index';
	import {Decrypt} from '@/utils/secret.js'

    const {routeState} = application;
    export default {
        components: {
            mInput,
            mIcon
        },
        mixins:[mixins],
        data() {
            return {
				test:'',
                username:'',
                password:'',
                positionTop: 0,
                identifycode:'',
                devicNum:undefined,
                //isRemeber:false,
                //isRemeberLabel:'记住密码',
                //gps:{}
            }
        },
        computed: {
           useGesture(){
                return this.userDataForLogin.useGesture;
            },
        },
        onLoad(){
            routeState.navigateToLogin = true;
			//app切出，清除账号和密码
			uni.$on('appHide',()=>{
				this.username = "";
				this.password = "";
			})
        },
        onUnload(){
            routeState.navigateToLogin = false;
        },
        onReady(){
            const userDataForLogin =  this.userDataForLogin;
            console.log('userDataForLogin:',userDataForLogin)
            if (userDataForLogin){
                const {timestamp,devicNum,username,password} = userDataForLogin;
                    this.devicNum = devicNum;
					if(username!=undefined){
						this.username = Decrypt(username);
					}
                    //this.password = password;
            }

            //#ifdef APP-PLUS
            if (!this.devicNum){
                this.devicNum = plus.device.uuid;
            }
            // const $this = this;
            // uni.getLocation({
            //         type: 'wgs84',
            //         success: function (res) {
            //             const {longitude,latitude} = res;
            //             $this.gps.longitude = longitude;
            //             $this.gps.latitude = latitude;
            //         }
            //     });
            //#endif
        },
        methods: {
            // checkboxChange(e){
            //     const values = e.detail.value;
            //     console.log('values:',values);
            //     this.isRemeber = values.length>0;
            // },
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                //this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
            bindLogin() {
                /**
                 * 客户端对账号信息进行一些必要的校验。
                 * 实际开发中，根据业务需要进行处理，这里仅做示例。
                 */
                if (this.username.length < 6 || this.username.length > 12) {
                    uni.showToast({
                        icon: 'none',
                        title: '账号最短为6个字符,最长为12个字符'
                    });
                    return;
                }
                if (this.password.length < 6 || this.password.length > 12) {
                    uni.showToast({
                        icon: 'none',
                        title: '输入原密码最短为6个字符,最长为12个字符'
                    });
                    return;
                }

                /**
                 * 下面简单模拟下服务端的处理
                 * 检测用户账号密码是否在已注册的用户列表中
                 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
                 */

                const params = {
                    username: this.username,
                    password: this.password,
                    devicNum: this.devicNum,
                    isInput:0,
                    }
                let callback = (validUser)=>{
                    if (validUser) {
                        // if (this.isRemeber){
                        //     //记录用户名密码
                        //     uni.setStorage({
                        //         key:'userDataForLogin',
                        //         data:{
                        //             username: this.username,
                        //             password: this.password,
                        //             devicNum: this.devicNum,
                        //             timestamp:new Date().getTime()
                        //         }
                        //     })
                        // }else {
                        // }
                        this.setUserDataForLogin(params);
                        //routeState.navigateToLogin = false;
                        if(this.userData.firstLogin && this.userData.roleType == '0'){
                            routeState.navigateToLogin = false;
                            uni.showModal({
                                title: '提示',
                                content: '首次登录，需要修改初始密码',
                                showCancel:false,
                                success: function (res) {
                                    if (res.confirm) {
                                        uni.navigateTo({
                                            url: '/pages/system/modifyPwd/modifyPwd'
                                        });
                                    }
                                }
                            });
                            return;
                        }
                        
                        refreshForlogin(this);
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: '用户账号或密码不正确',
                        });
                    }
                };
                this.login({
                    ...params,
                   // gps:this.gps,
                    callback: callback
                });
            },
        },
        onBackPress(){
            if(this.isLastPage()){
                 uni.showModal({  
                    title: '提示',  
                    content: '是否退出？',  
                    success: function(res) {  
                        if (res.confirm) {  
                            // 退出当前应用，改方法只在App中生效  
                            plus.runtime.quit();  
                        } else if (res.cancel) {  
                            console.log('用户点击取消');  
                        }  
                    }  
                });  
                return true;
            }
            return false;
        }
    }
</script>

<style lang="less">
    .titleBg {
        width: 100%;
        height: 200upx;
    }
    .action-row {
		padding: 10upx 50upx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
		font-size: 24upx;
		color: #333;
    }

    .action-row navigator {
        color: #007aff;
        padding: 0 20upx;
    }

    .oauth-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .oauth-image {
        width: 100upx;
        height: 100upx;
        border: 1upx solid #dddddd;
        border-radius: 100upx;
        margin: 0 40upx;
        background-color: #ffffff;
    }

    .oauth-image image {
        width: 60upx;
        height: 60upx;
        margin: 20upx;
    }



    /*每个页面公共css */
    /* uni-app默认全局使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。如不了解flex布局，请参考http://www.w3.org/TR/css3-flexbox/。如不使用flex布局，请删除或注释掉本行。*/
    body,
    page {
        min-height: 100%;
        display: flex;
    }

    /* #ifdef MP-BAIDU */
    page {
        width: 100%;
        height: 100%;
        display: block;
    }

    swan-template {
        width: 100%;
        min-height: 100%;
        display: flex;
    }

    /* #endif */

    /* 原生组件模式下需要注意组件外部样式 */
    m-input {
        width: 100%;
        min-height: 100%;
        display: flex;
    }

    .stickyClass{
        position: sticky;
        top: 0;
        z-index:100;
        /*当menu元素距离可视窗口顶部<0时，menu由sticky定位切换为fixed定位*/
    }

    .content {
        display: flex;
        flex: 1;
        flex-direction: column;
        background-color: #fff;
        padding: 20upx;
    }

    .input-group {
        background-color: #ffffff;
        margin-top: 40upx;
        position: relative;
		padding: 0 50upx;
    }


    .input-row {
        display: flex;
        flex-direction: row;
        position: relative;
		height: 90upx;
		line-height: 90upx;
		align-items: self;
		
		.input-frame {
			border-bottom: 1px solid #d8d8d8;
			font-size: 28upx;
			color: #333;
		}
    }

    .input-row .title {
        max-width: 40%;
        height: 90upx;
        min-height: 90upx;
        line-height: 90upx;
		margin-right: 15upx;
		
		.icon {
			width: 45upx;
			height: 45upx;
		}
    }

    .input-row.border::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 15upx;
        height: 1upx;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .btn-row {
        margin-top: 50upx;
        padding: 20upx 50upx;
    }

    button.primary {
        background-color: #377cfd;
    }
	
	.login-avatar {
		text-align: center;
		padding: 198upx 0 50upx;
		.avatar {
			width: 160upx;
			height: 160upx;
		}
	}
	
</style>
